<!--
<template>
  <h1>ref的使用</h1>

  <div v-for="i in 5" :key="i" v-text="i" ref="hi"></div>

  <h1 ref="hello">hello vue3</h1>
</template>

<script setup>
import { ref, onMounted } from "vue";
const hello = ref();
const hi = ref();

onMounted(() => {
  hello.value.style.color = "red";
  console.log(hi.value[0].style.color = "red");
});
</script>
-->


<!--
<template>
  <h1>ref的使用</h1>

  <div v-for="i in 5" :key="i" v-text="i" :ref="collect"></div>

  <h1 ref="hello">hello vue3</h1>
</template>

<script setup>
import { ref, onMounted } from "vue";
const hello = ref();
let arr = [];
const collect = (dom) => {
  if (dom) arr.push(dom);
};

onMounted(() => {
  hello.value.style.color = "red";
  // console.log(hi.value[0].style.color = "red");

  arr[0].style.color = "pink";
});
</script>

-->


<!--
<template>
  <h1>Dome组件</h1>
</template>

<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs(); // 父组件传递过来的自定义属性们
console.log("attrs:", attrs);
</script>
-->



<template>
  <div>
    <h1>Dome01</h1>
    <div class="lang">
      <span
        v-for="item in langs"
        :key="item.id"
        v-text="item.label"
        :class="{ on: modelValue === item.value }"
        @click="langChange(item)"
      ></span>
    </div>
    <hr />
    <div>
      <input
        type="radio"
        value="man"
        :checked="gender === 'man'"
        @change="$emit('update:gender', $event.target.value)"
      />
      男
      <!-- <input
        type="radio"
        value="woman"
        :checked="gender === 'woman'"
        @change="$emit('update:gender', $event.target.value)"
      /> -->
      <input type="radio" value="woman" v-model="g" />
      女
      <!-- <input
        type="radio"
        value="unknow"
        :checked="gender === 'unknow'"
        @change="$emit('update:gender', $event.target.value)"
      /> -->
      <input type="radio" value="unknow" v-model="g" />
      保密
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, reactive, computed } from "vue";
const langs = reactive([
  { id: 1, value: "zh", label: "中文" },
  { id: 2, value: "en", label: "英文" },
  { id: 3, value: "fr", label: "法语" },
]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "zh",
  },
  modelModifiers: {
    default: () => ({}),
  },
  gender: {
    type: String,
    default: "man",
  },
});
const emit = defineEmits(["update:modelValue", "update:gender"]);
const g = computed({
  get() {
    return props.gender;
  },
  set(val) {
    emit("update:gender", val);
  },
});
const langChange = (item) => {
  const { sort, trim } = props.modelModifiers;
  if (trim) {
    // todo..
  }
  if (sort) {
    // todo..
  }
  emit("update:modelValue", item.value);
};
</script>

<style>
.lang span {
  cursor: pointer;
  padding: 20px;
}
.lang span.on {
  color: red;
}
</style>









